<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <textarea style="width: 100%; height: 500px" name="content"></textarea>
      <div style="display: flex; margin-top: 10px">
        <div>播放角色：</div>
        <select name="type">
          <option value="zh-CN-XiaoxiaoNeural" label="晓晓" />
          <option value="zh-CN-XiaoyiNeural" label="晓依" />
          <option value="zh-CN-YunjianNeural" label="云江" />
          <option value="zh-CN-YunxiNeural" label="云溪" />
          <option value="zh-CN-YunxiaNeural" label="云霞" />
          <option value="zh-CN-YunyangNeural" label="云洋" />
          <option value="zh-CN-liaoning-XiaobeiNeural" label="辽宁" />
          <option value="zh-CN-shaanxi-XiaoniNeural" label="陕西" />
          <option value="zh-HK-HiuGaaiNeural" label="香港1" />
          <option value="zh-HK-HiuMaanNeural" label="香港2" />
          <option value="zh-HK-WanLungNeural" label="香港3" />
          <option value="zh-TW-HsiaoChenNeural" label="台湾1" />
          <option value="zh-TW-HsiaoYuNeural" label="台湾2" />
          <option value="zh-TW-YunJheNeural" label="台湾3" />
        </select>
      </div>
      <div style="margin-top: 10px; display: flex">
        <button id="submit" type="submit">转成语音</button>
        <span id="load" style="display: none">下载中请等待</span>
        <a style="margin-left: 10px" id="audiolinke">下载当前音频</a>
      </div>
    </form>

    <script>
      const button = document.querySelector("#submit");
      const load = document.querySelector("#load");
      const audiolinke = document.querySelector("#audiolinke");
      const audio = new Audio();

      document
        .getElementById("myForm")
        .addEventListener("submit", function (event) {
          event.preventDefault(); // 防止表单提交后刷新页面
          let type = document.getElementsByName("type")[0].value;
          let content = document.getElementsByName("content")[0].value;
          downloadFile(content, type);
        });

      async function downloadFile(content, type) {
        button.style.display = "none";
        load.style.display = "block";

        const data = {
          content,
          type,
        };

        // 发起POST请求
        const response = await fetch("/audio", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data), // 将参数对象转换为JSON字符串
        });

        if (!response.ok) {
          throw new Error("HTTP error " + response.status);
        }

        // 获取Blob文件
        const blob = await response.blob();

        // 创建Blob URL
        const blobURL = window.URL.createObjectURL(blob);

        audio.src = blobURL;
        audio.play();
        audiolinke.href = blobURL;

        // 创建并配置下载链接
        // const tempLink = document.createElement("a");
        // tempLink.href = blobURL;
        // tempLink.setAttribute("download", "音频文件");
        // tempLink.style.display = "none";

        // 将链接添加到页面，触发下载，然后删除链接
        // document.body.appendChild(tempLink);
        // tempLink.click();
        // document.body.removeChild(tempLink);

        button.style.display = "block";
        load.style.display = "none";
      }
    </script>
  </body>
</html>
